<!-- 个人设置 -->
<template>
	<view class="userInfo">
		<u-navbar title="个人设置" titleStyle="font-weight: bold;font-size: 30rpx;" :fixed="true" :autoBack="true">
		</u-navbar>
		<u-gap height="20rpx" bgColor="#f2f2f2"></u-gap>
		<u-cell-group :border="false">
			<u-cell size="large" :isLink="true" arrow-direction="arrow-right" :border="false">
				<view slot="title" class="u-slot-title" style="display: flex;align-items: center;">
					<text class="u-cell-text">头&nbsp;&nbsp;&nbsp;&nbsp;像：</text>
					<u--image width="80rpx" height="80rpx" src="https://cdn.uviewui.com/uview/album/1.jpg"
						shape="circle">
					</u--image>
				</view>
				<text slot="value" class="u-slot-value" style="color: #da8774;">更换</text>
			</u-cell>
		</u-cell-group>
		<u-gap height="20rpx" bgColor="#f2f2f2"></u-gap>
		<u-cell-group :border="false">
			<u-cell size="large" :isLink="true" arrow-direction="arrow-right">
				<view slot="title" class="u-slot-title">
					<text class="u-cell-text">昵&nbsp;&nbsp;&nbsp;&nbsp;称：</text>
					<text style="color: #999;">阿白</text>
				</view>
				<text slot="value" class="u-slot-value" style="color: #da8774;">更改</text>
			</u-cell>
			<u-cell size="large" :isLink="true" arrow-direction="arrow-right">
				<view slot="title" class="u-slot-title">
					<text class="u-cell-text">性&nbsp;&nbsp;&nbsp;&nbsp;别：</text>
					<text style="color: #999;">保密</text>
				</view>
			</u-cell>
			<u-cell size="large" :isLink="true" arrow-direction="arrow-right" :border="false">
				<view slot="title" class="u-slot-title">
					<text class="u-cell-text">简&nbsp;&nbsp;&nbsp;&nbsp;介：</text>
					<text style="color: #999;"></text>
				</view>
			</u-cell>
		</u-cell-group>
		<u-gap height="20rpx" bgColor="#f2f2f2"></u-gap>
		<u-cell-group :border="false" class="address">
			<u-cell size="large" :isLink="true" arrow-direction="arrow-right">
				<view slot="title" class="u-slot-title">
					<text class="u-cell-text">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</text>
					<text style="color: #999;"></text>
				</view>
				<text slot="value" class="u-slot-value" style="color: #da8774;">修改</text>
			</u-cell>
			<u-cell size="large" title="填写收货地址" :isLink="true" arrow-direction="arrow-right" :border="false">
				<text slot="value" class="u-slot-value" style="color: #da8774;">修改</text>
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo {
		padding-top: 88rpx;

		.address {

			// 丝带样式
			.u-cell::before {
				position: absolute;
				right: 0;
				bottom: -2rpx;
				left: 0;
				height: 4rpx;
				background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
				background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
				background-size: 160rpx;
				content: '';
			}
		}
	}
</style>
